<!--onlyoffice 编辑器-->
<template>
  <div id="editorDiv"></div>
</template>

<script setup name="OnlyOffice">
import { handleDocType } from '@/utils/onlyofficeUtil'
const emits = defineEmits()
const store = useStore()
const { proxy } = getCurrentInstance()
const props = defineProps({
  option: {
    type: Object,
    default: () => {
      return {}
    },
  },
  fileObj: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

const user = store.state.user.userInfo.user
let doctype = ref('')

function setEditor(option) {
  console.log('进来了')
  console.log('文档地址==>' + option.url)
  doctype = handleDocType(option.fileType)
  let config = {
    document: {
      fileType: option.fileType,
      key: option.key,
      title: option.title,
      codePage: 65001,
      permissions: {
        comment: true,
        download: false,
        modifyContentControl: true,
        modifyFilter: true,
        print: props.fileObj.allowPrint == 1 ? true : false,
        edit: option.isEdit,
        fillForms: true,
        review: true,
      },
      url: option.url,
    },
    documentType: doctype,
    editorConfig: {
      // 编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
      callbackUrl: option.editUrl,
      lang: 'zh',
      customization: {
        commentAuthorOnly: false,
        comments: true,
        compactHeader: false,
        compactToolbar: true,
        feedback: false,
        plugins: true,
        //强制保存
        forcesave: false,
        // 插件展示
        plugins: false,
        // 评论图标
        comments: false,
        // 聊天图标
        chat: false,
        // -2页面自动缩放到和编辑器等宽（不留缝隙） -1适应屏幕 以及1-100缩放比例
        zoom: -2,
        // customer和logo等其它属性 非商业版不起作用
        // customer: {
        //   name: 'SLP',
        //   address: '成都市武侯区',
        //   mail: 'email',
        //   www: 'baidu.com',
        //   info: '主要信息',
        // },
      },
      user: {
        id: user.id,
        name: user.nickName,
      },
      // 是否可以编辑 view edit
      mode: option.mode,
    },
    width: '100%',
    height: '100%',
    token: option.token,
    events: {
      onDocumentReady: onDocumentReady,
      onAppReady: onAppReady,
    },
  }
  try {
    let docEditor = new DocsAPI.DocEditor('editorDiv', config)
  } catch (error) {
    console.log(error)
  }
}

function onAppReady() {
  console.log('Document is onAppReady')
  emits('onAppReady')
}

function onDocumentReady() {
  console.log('Document is loaded')
  emits('loaded')
  /*  console.log('Document is loaded')
  console.log(window)
  console.log(document)
  setTimeout(() => {
    let iframeDocument = document.querySelector('iframe').contentWindow

    let element = iframeDocument.getElementById('id_viewer')
    console.log(iframeDocument)
     let style = window.getComputedStyle(element) //元素样式改变时会自动更新
    console.log(style)
  }, 2000) */
}

onMounted(() => {
  console.log(123)
  if (props.option.url) {
    setEditor(props.option)
  }
})

// watch和onMounted重复
// let _url = computed(() => {
//   return props.option.url
// })
// watch(_url, (val, oldVal) => {
//   setEditor(props.option)
// })
</script>

<style scoped></style>
